import React from 'react';
import Swiper from '../component/Swiper/Swiper'
import './Home.less'
import request from '../../utils/request'
import ItemR from '../component/ItemR/ItemR'
import Loading from '../component/Loading/Loading'


export default class Home extends React.Component {
  state = {
    data: [],
    position: false,
    id: '13366',
    page: 1,
  }

  componentDidMount() {
    this.getData();
    addEventListener('scroll', () => {
      // 粘性定位
      if (window.scrollY > 80) {
        this.setState({
          position: true,
        })
      } else {
        this.setState({
          position: false,
        })
      };
      // 页面总高
      const scrollHeight = document.documentElement.scrollHeight;
      // 页面显示高度+滚动
      const scrollY = document.documentElement.clientHeight + window.scrollY;
      if (scrollHeight == scrollY) {
        this.changePage()
      }
    })
  }

  // 更改类别id发送请求
  changeId(id) {
    this.setState({
      id,
      data: []
    }, () => {
      this.getData()
    });
  }

  // 加载下一页
  changePage() {
    this.setState({
      page: this.state.page + 1
    }, () => {
      this.getData();
    })
  }

  // 发送请求获取数据
  getData() {
    const url = `https://shop.sunofbeach.net/union/shop/discovery/${this.state.id}/${this.state.page}`;
    request(url).then(({ data }) => {
      this.setState({
        data: this.state.data.concat(data)
      })
    }).catch((err) => {
      console.log(url + '请求错误');
      console.log(err);
    })
  }

  goTop() {
    window.scrollTo(0, 0)
  }

  render() {
    return (
      <div className={'Home ' + (this.state.position && 'fixed')}>
        <nav className='sidebar-left'>
          <ul className='menu'>
            <li className={'item ' + (this.state.id == 13366 && 'active')} onClick={() => this.changeId(13366)}>推荐</li>
            <li className={'item ' + (this.state.id == 13375 && 'active')} onClick={() => this.changeId(13375)}>食品</li>
            <li className={'item ' + (this.state.id == 13372 && 'active')} onClick={() => this.changeId(13372)}>男装</li>
            <li className={'item ' + (this.state.id == 13367 && 'active')} onClick={() => this.changeId(13367)}>女装</li>
            <li className={'item ' + (this.state.id == 13373 && 'active')} onClick={() => this.changeId(13373)}>内衣</li>
            <li className={'item ' + (this.state.id == 13374 && 'active')} onClick={() => this.changeId(13374)}>母婴</li>
            <li className={'item ' + (this.state.id == 13369 && 'active')} onClick={() => this.changeId(13369)}>数码家电</li>
            <li className={'item ' + (this.state.id == 13371 && 'active')} onClick={() => this.changeId(13371)}>美妆个护</li>
            <li className={'item ' + (this.state.id == 13376 && 'active')} onClick={() => this.changeId(13376)}>户外运动</li>
            <li className={'item ' + (this.state.id == 13370 && 'active')} onClick={() => this.changeId(13370)}>鞋包配饰</li>
            <li className={'item ' + (this.state.id == 13368 && 'active')} onClick={() => this.changeId(13368)}>家居家装</li>
          </ul>
          <button className='top' onClick={() => this.goTop()}>
            <i className='iconfont icon-totop'></i>
          </button>
        </nav>

        <div className='main'>
          {
            this.state.data.map((item, i) => {
              return <ItemR key={i} data={item}></ItemR>
            })
          }
          <Loading></Loading>
        </div>

        <div className='swiper'>
          <Swiper></Swiper>
        </div>
      </div>
    )
  };
}